<template>
  <el-dialog title="关联报备商机" :close-on-click-modal="false" :visible.sync="visible" class="jsbos-dialog jsbos-dialog_center"
    lock-scroll width="1200px" append-to-body v-dialogDrag>
    <div class="CustomerPoolBox">
      <el-row>
        <el-col :span="24">
          <div class>
            <el-row class :gutter="24">
              <el-col :span="24"></el-col>
            </el-row>
            <el-row class :gutter="16">
              <el-form @submit.native.prevent>
                <el-col :span="24" style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  ">
                  <!-- 客户名称 -->
                  <el-col :span="10">
                    <el-form-item label>
                      <el-input v-model="query.customerName" placeholder="客户名称" clearable></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label>
                      <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
                      <el-button icon="el-icon-refresh-right" size="mini" @click="reset()">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-form>
            </el-row>
            <div class="Tabbox">
              <el-table border ref="multipleTable" v-loading="listLoading" :data="opportunityList"
                @sort-change="sortChange" @selection-change="handleSelectionChange" @row-click="setCustomer">
                <el-table-column prop="projectScale" label="商机描述" width="0" align="left" />
                <el-table-column prop="customerName" label="客户名称" width="0" align="left" />
                <el-table-column prop="contactName" label="联系人" width="80" align="left" />
                <el-table-column prop="contactPhone" label="联系人电话" width="100" align="left" />
                <el-table-column prop="reportingProject" label="报备项目" width="0" align="left" />
                <el-table-column prop="creatorUserId" label="创建人" width="80" align="left" />
                <el-table-column prop="projectStageName" label="项目阶段" width="90" align="left" />
                <el-table-column prop="saleStageName" label="销售阶段" width="100" align="left" />
              </el-table>
              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                @pagination="initData" />
            </div>
          </div>
        </el-col>
      </el-row>
      <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow" />
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import FlowBox from "@/views/workFlow/components/FlowBox";
import { isEmpty } from "@/utils/isEmpty";
import { getProvinceSelector, GetAreaByIds } from "@/api/system/province";
export default {
  components: { FlowBox },
  props: {
    value: {
      default: () => []
    },
    level: {
      type: Number,
      default: 3
    },
    size: String
  },
  data() {
    return {
      selectedGrade: [],
      visible: false,
      treeLoading: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "fullName",
        isLeaf: "isLeaf"
      },
      opportunityList: [],
      nodeId: "",
      fullName: "",
      refreshTree: true,
      selectedData: [],
      selectedIds: [],
      expands: true,
      // activeName: "second",
      activeName: "first",
      setting: {},
      multipleSelection: [],
      showAll: false,
      query: {
        customerName: ""
      },
      list: [],
      listLoading: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: ""
      },
      flowVisible: false,
      exportBoxVisible: false,
      conductOptions: [],
      conductProps: { label: "fullName", value: "id" },
      gradeOptions: [],
      gradeProps: { label: "fullName", value: "id" },
      typeOptions: [],
      typeProps: { label: "fullName", value: "id" }
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    }
  },
  created() {
    this.getconductOptions();
    this.getgradeOptions();
    this.gettypeOptions();
    this.nodeId = "-1";
  },
  methods: {
    //处理selectedGrade数据
    handleGrade() {
      this.query.grade = this.selectedGrade.join(",");
    },
    setCustomer(row, column, event) {
      this.visible = false;
      // console.log(row);
      this.$emit("refreshDataList", row);
    },
    init() {
      this.visible = true;

      let data = {
        ...this.listQuery,
        ...this.query,
        source: "visit",
        switchType: "follow"
      };
      this.getOpportunityList(data);
    },
    getOpportunityList(data) {
      this.listLoading = true;
      request({
        url: `/api/visit/RkProjectReporting/getList`,
        method: "POST",
        data: data
      }).then(res => {
        console.log(res.data.list);
        this.listLoading = false;
        this.opportunityList = res.data.list;
      });
    },
    //地址
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getconductOptions() {
      getDictionaryDataSelector("9b542177a477488994ce09fff3c93901").then(
        res => {
          this.conductOptions = res.data.list;
        }
      );
    },
    getgradeOptions() {
      getDictionaryDataSelector("361888069978164485").then(res => {
        this.gradeOptions = res.data.list;
      });
    },
    gettypeOptions() {
      getDictionaryDataSelector("361888356264578309").then(res => {
        this.typeOptions = res.data.list;
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    initData() {
      this.$nextTick(() => {
        this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
        console.log(this.$refs.multipleTable.bodyWrapper.scrollTop);
      });
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
        opportunityList: this.opportunityList
      };
      request({
        url: `/api/crm/CrmCustomer/getList`,
        method: "post",
        data: _query
      }).then(res => {
        this.list = res.data.list;

        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },

    addOrUpdateHandle(id, flowState) {
      let data = {
        id: id || '',
        processId: id || '',
        enCode: "CrmCustomer",
        flowId: "361860553754283269",
        formType: 1,
        opType: flowState ? 0 : "-1",
        status: flowState
      };
      this.setting = data;
      this.flowVisible = true;
      this.$nextTick(() => {
        this.$refs.FlowBox.init(data);
      });
    },
    search() {
      let data = {
        ...this.listQuery,
        ...this.query,
        source: "visit",
        switchType: "follow"
      };
      this.getOpportunityList(data);
    },
    colseFlow(isrRefresh) {
      this.flowVisible = false;
      if (isrRefresh) this.reset();
    },
    //获取树状地址数据
    mouseEnter(data, show) {
      data.ifShow = show;
    },
    reset() {
      this.query.name = "";
      // this.$refs.treeBox.setCheckedKeys([], false);
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.search();
    },
    handleNodeClick(data, node) {
      // if (!node.isLeaf) return;
      const nodePath = this.getNodePath(node);
      let currId = nodePath.map(o => o.id);
      let currData = nodePath.map(o => o.fullName).join("/");
      this.selectedIds = [currId];
      this.selectedData = [currData];
      this.query.address = this.selectedIds[0];
      this.search();
    }
  }
};
</script>

<style scoped lang="scss">
>>>.el-dialog__body {
  // overflow: hid;
  overflow: hidden;
  overflow-x: hidden;
  max-height: 70vh;
  padding: 20px 50px 2px;
}

.CustomerPoolBox {
  .Tabbox {
    position: relative;

    // overflow: auto;
    >>>.el-table__body-wrapper {
      height: 283px;
      overflow: auto;
      padding-bottom: 24px;
    }

    >>>.el-pagination {
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: white;
      width: 100%;
    }
  }
}
</style>
